<template>
  <div>
     <!-- <indexHeader></indexHeader> -->
     <div class="wrap">
       <div class="breadcrumb base-font-14 text-999"><span>首页</span>/<span>{{content.title}}</span></div>
      <div class="content">
        <div class="text-center">
          <div class="base-font-40 text-bold text-333 padding-top-20">{{content.title}}</div>
          <div class="base-font-16 text-999 padding-tb-15">发布时间:{{content.createTimeStr}}<span class="margin-lr-10">|</span> 查看: {{content.browseNum}} </div>
        </div>
        <div class="base-font-18 text-666 margin-top-20" v-html="content.content"> </div>
      </div>
     </div>
     <!-- <foot></foot> -->
  </div>

</template>

<script>
  import banner from "@/static/image/lx/banner.jpg"
  // import leftBlockVue from '../../components/left/leftBlock.vue'
  // import indexHeader from '@/components/index/header.vue';
  // import coursemain from '@/components/course/coursemain.vue';
  // import foot from '@/components/foot/foot.vue';
  export default{
    components:{
      // leftBlockVue,
      // indexHeader
    },
    data(){
      return{
        banner,
        id:"",
        content:'',
        labelName:""
      }
    },
	watch: {
	  $route: {
	    handler(to, from) {
			this.id=this.$route.query.id
			this.labelName = this.$route.query.name || ''
			this.getDetails()
	    },
	    deep:true,
	    immediate: true, // 第一次初始化渲染就可以监听到
	  }
	},
    mounted(){
      this.id=this.$route.query.id
	  console.log(this.id,'this.id')
      this.labelName = this.$route.query.name || ''
      this.getDetails()
    },
    methods:{
        getDetails(){
          this.$getArticleById({id:this.id}).then((res)=>{
            if(res.code===0){
              this.content=res.data
            }
          })
        }
    }
  }
</script>

<style lang="scss" scoped>
  .breadcrumb{height:50px;line-height:50px;border-bottom:1px solid #f4f2e5;margin-bottom:15px;}
  .com-news-List{width:100%;height:auto;border-bottom:1px solid #f4f2e5;
    .leftImg{width:220px;height:160px;flex-shrink:0;
      .el-image{width:220px;height:160px;}
    }
    .newsInfo{flex-grow:1;padding-left:20px;box-sizing: border-box;line-height:1.7;}
    .infoContent{height:85px;}
  }
  .subMenuBox{
    margin-bottom:15px;
    .menuName{
      line-height: 30px;
      width:100px;
      border: 1px solid #FFFFFF;
      background: #fff;
    }
    .subMenuItem{
      color: #959595;
        font-size: 14px;
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #ddd;
        background: #fff;
        margin-right: 15px;
         cursor: pointer;
        &:hover{
          border: 1px solid #ef9b76;
              color: #fff;
              background: #ef9b76;
              cursor: pointer;
        }
    }
  }
  .content{line-height:2.4;color:#666666;}
</style>
